<template>
	<view>
		<replacebtn :info="{replace:true,news:false,jishi:true}"></replacebtn>
		<!-- 内容 -->
		<view v-show="!boshow" :class="item.check_status==4?'neirong bgakground-posi':'neirong'" v-for="item in list.data" :key="item.id" @click="shijixq(item.id)">
			<view class="mainpadding">
				<!-- 头像 -->
				<view class="flexleft">
					<view class="touxiang margin_right3">
						<image :src="item.user.avatar" mode=""></image>
					</view>
					<view class="strongtext margin_right3">{{item.username}}</view>
					<view class="zhiding" v-show="item.top_status==1">置顶</view>
				</view>
				<!-- 文本 -->
				<view class="margin_top nostrongtext" style="line-height: 40rpx;">
					<text>{{item.name + " " + item.content.replace(/[\r\n]/g, "")}}</text>
				</view>
				<!-- 照片 -->
				<view class="lablephoto margin_top flexleft" v-show="item.images.length && item.show==false"
					@click.stop="showimage(item)">
					<view class="photo margin_right3"></view>
					<view>{{item.images.length}}张照片</view>
				</view>
				<!-- 图片合集 -->
				<view class="flexleft flex_wrap" v-show="item.show">
					<view class="proview_images margin_top" v-for="ite in item.images" :key="ite">
						<image :src="ite" mode=""></image>
					</view>
				</view>
				<!-- 底部围观 -->
				<view class="zuiyoubian margin_top flexleft">
					<view class="lablecolor margin_right3">#{{item.topic.name}}</view>
					<!-- <view class="smalltext">{{item.createtime | formatDate('-')}}</view> -->
					<view class="smalltext margin_right3">{{item.createtime_text}}</view>
					<view class="huisetext">{{item.view_count}}人围观</view>
				</view>
			</view>
		</view>
	
		<view class="zwnr" v-show="boshow">
			暂无内容
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import replacebtn from '../../components/replacebtn/replacebtn.vue'
	export default {
		data() {
			return {
				component: {
					replacebtn
				},
				listid: "",
				//集市列表
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				boshow:false,
			}
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				let maohao=':'
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${month}${spe}${day}  ${h}${maohao}${mm}`;
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.item));
			this.listid = data.id
			let jpp = data.name
			uni.setNavigationBarTitle({
				title: jpp
			});
		},
		onShow() {
			this.init()
		},
		methods: {
			//集市详情
			shijixq(id) {
				let msg = {
					detailid:id,//列表id
					plid:""//评论id
				}
				uni.navigateTo({
					url: '/pages/jishi/xiangqingsj?idjpp='+encodeURIComponent(JSON.stringify(msg))
				})
			},
			// 展示图片
			showimage(item) {
				item.show = true
			},
			//集市列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('forum/lists', 'POST', {
					page: page || 1,
					limit: _this.limit,
					topic_id: this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						if(res.data.data.length == 0){
							this.boshow = true
						}
						let resList = res.data;
						let dataList = _this.list;
						res.data.data.forEach(item => {
							Object.assign(item, {
								show: false
							})
						})
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.bgakground-posi{
		background-image: url("@/static/image/system/over.png");
		background-position: 90% 20%;
		background-repeat: no-repeat;
		background-size: 170rpx 140rpx;
	}
	.neirong {
		padding: 0 30rpx;
		border-bottom: 1rpx solid rgba(235, 235, 235, 0.6);
	}

	.zhiding {
		border-radius: 5rpx;
		padding: 5rpx 10rpx;
		background-color: #000000;
		font-size: 24rpx;
		font-family: MicrosoftYaHei-Bold-, MicrosoftYaHei-Bold;
		font-weight: normal;
		color: #FFFFFF;
	}

	.lablecolor {
		font-size: 20rpx;
		font-family: MicrosoftYaHei-, MicrosoftYaHei;
		font-weight: normal;
		color: #2ACC9C;
	}

	.proview_images {
		width: 110rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
</style>
<style lang="scss" scoped>
	.overflow_hidden {
		max-width: 350rpx;
		overflow: hidden;
		/* 限制一行显示 */
		white-space: nowrap;
		/* 显示不下省略号显示 */
		text-overflow: ellipsis;
	}
	.jishitupian {
		margin: 30rpx auto 0;
		width: 43rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.fabutupian {
		width: 43rpx;
		margin: auto;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.baisetext {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FFFFFF;
	}

	.gudingbox {
		padding: 10rpx 30rpx;
		border-radius: 20rpx;
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
		background: rgba(42, 204, 156, .8);
	}

	.chengsebtn {
		color: #FEB57F;
		background: rgba(254, 181, 127, .1);
	}

	.hongsebtn {
		background: rgba(253, 121, 112, .1);
		color: #FD7970;
	}

	.huangsebtn {
		background: rgba(253, 209, 130, .1);
		color: #FDD182;
	}

	.huisetext {
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.flexbuju {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.rt {
		margin-left: 30rpx;
		// flex: 8;
	}
	.zwnr{
		text-align: center;
		padding-top: 400rpx;
	}

	.zisebtn {
		color: #5179FA;
		background: rgba(81, 121, 250, .1);
	}

	.lvsebtn {
		color: #2ACC9C;
		background: rgba(0, 232, 190, .1);
	}

	.allbtn {
		margin-top: 18rpx;
		width: 77rpx;
		height: 36rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.touxiang {
		// flex: 1.5;
		width: 99rpx;
		height: 99rpx;
		border-radius: 50%;
		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.tbtupian {
		width: 80rpx;
		height: 80rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
